<template>
  <div class="enterpriseInfo">
    <div>
      <div class="title">
        <h1 style="color: #337ECC;font-size: 40px">宣讲会信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <PlaySquareOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #337ECC; padding: 20px;border-top: 30px solid #337ECC; border-radius: 10px">


      <div style="display: flex;  justify-content: space-between;">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="宣讲会名称">{{ formState.videoName }}</a-descriptions-item>
            <a-descriptions-item label="宣讲会公司名称">{{ formState.videoCompanyName }}</a-descriptions-item>
            <a-descriptions-item label="宣讲会审核状态">
              {{ formState.videoAdminStatus === 1 ? '封闭' : '正常' }}
            </a-descriptions-item>
            <a-descriptions-item label="宣讲会状态">{{ formState.videoStatus }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div style="
        display: flex;
        justify-content: center;
        align-items: center;"
        >
          <img
              :src="'http://localhost:8080/file/download?name='+formState.videoCompanyLogo"
              alt="avatar" style="width: 200px; height: 200px; border-radius: 50%;border: 2px solid #337ECC"
          />
        </div>
      </div>
      <a-descriptions title="视频简介">
      </a-descriptions>
      <div>
        <video
            ref="videoRef"
            :autoplay="false"
            :src="'http://localhost:8080/video-file/video?videoName='+formState.videoUrl"
            controls
            height="auto"
            width="300px"
            @timeupdate="handleTimeUpdate"
        ></video>
        <!--
           src: 视频路径
           width: 视频宽度
           height: 视频高度
           autoplay: 是否自动播放
           controls: 是否显示控制条
           @timeupdate: 视频播放时触发(获取视频播放的时间)
         -->
      </div>
    </div>
  </div>
</template>
<script setup>


import {computed, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {CopyOutlined, PlaySquareOutlined, UserOutlined} from "@ant-design/icons-vue";
import {queryVideoDetailByVideoIdAPI} from "@/apis/video.js";


const route = useRoute()
//定义数据
const formState = reactive({
  videoId: '',
  videoName: '',
  videoStatus: '',
  videoAdminStatus: '',
  videoCompanyLogo: '',
  videoUrl: '',
});

//获取数据
const getData = async (videoId) => {
  const res = await queryVideoDetailByVideoIdAPI(videoId)
  formState.videoId = res.data.data.videoId;
  formState.videoName = res.data.data.videoName;
  formState.videoCompanyLogo = res.data.data.videoCompanyLogo;
  formState.videoAdminStatus = res.data.data.videoAdminStatus;
  formState.videoStatus = res.data.data.videoStatus;
  formState.videoCompanyName = res.data.data.videoCompanyName;
  formState.videoUrl = res.data.data.videoUrl;

}

//时间格式处理
const formattedFoundationDate = computed(() => {
  const date = new Date(formState.enterpriseFoundationDate);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});


//接收路由参数
const videoId = ref();
// 生命周期
onMounted(() => {
  videoId.value = route.params.videoId;
  getData(videoId.value)
});
</script>
<style scoped>
.enterpriseInfo {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }
}
</style>